<template>
  <v-container fluid style="padding:0px;" slot="activator">
    <v-layout row>
      <v-flex xs12>
        <v-chip close v-for="keyword in d_value" :key="keyword.id" @input="chipClosed(keyword.id)">{{keyword.value}}</v-chip>
      </v-flex>
    </v-layout>
    <v-layout row>
      <v-flex xs12>
      </v-flex>
    </v-layout>
    <v-menu offset-y style="width:100%" v-loading="loading">
      <v-text-field name="input-1" slot="activator" label="选择关键字列表" id="inputs" @input="onInput()"></v-text-field>
      <v-list>
        <v-list-item v-for="q in d_querys" :key="q.id" @click="choose(q)">
          <v-list-tile>
            <v-list-tile-title v-text="q.value"></v-list-tile-title>
          </v-list-tile>
        </v-list-item>
      </v-list>
    </v-menu>
  </v-container>
</template>
<script>
export default {
  data: function () {
    return {
      d_value: [],
      d_querys: []
    }
  },
  props: {
    value: {
      type: Array,
      default: []
    },
    querys: {
      type: Array,
      default: []
    },
    loading:{
      type:Boolean,
      default:false
    }
  },
  watch: {
    value: function () {
      this.d_value = this.value
    },
    querys:function(){
      this.d_querys=this.querys
    }
  },
  mounted: function () {
    this.d_value = this.value
    this.d_querys=this.querys
  },
  methods: {
    mouseOver(event) {
      logger.log("mouse over it", event)
    },
    chipClosed(id) {
      this.d_value = this.d_value.filter(function (item) {
        return item.id != id
      })
      this.$emit('input', this.d_value)
    },
    onInput() {
      logger.log('input is active')
      this.$emit('inputs',inputs.value)
    },
    choose(item){
      this.$emit('choose',item)
    }
  }
}
</script>
